<template>
  <div>
    <div>
      <van-nav-bar>
        <template #left>
          <van-icon name="arrow-left" size="20" @click="lkk()"/>
        </template>
      </van-nav-bar>
    </div>
    <div class="tou">
        <div class="all">
        <!-- 头像 -->
        <div>
          <van-image round width="5rem" height="5rem" :src="aeh.touXiang" />
        </div>
        <div class="all1">
            <div><van-button type="default">私信</van-button></div>
            <div v-if="addf===false"><van-button type="default" @click="p1()">取消关注</van-button></div>
            <div v-if="addf===true"><van-button type="info" @click="oop()">+关注</van-button></div>
        </div>
        <!-- 用户信息 -->
      </div>
        <div class="infor">
            <div>{{aeh.userName}}</div>
           <div>{{aeh.sex}}/{{aeh.address}}</div>
          <div>{{aeh.geQian}}</div>
        </div>
      <div class="all2">
          <div class="all3">
              <div>{{aeh.fansCount}}</div>
              <div>关注</div>
          </div>
           <div class="all3">
              <div>{{aeh.focusCount}}</div>
              <div>粉丝</div>
          </div>
           <div class="all3">
              <div>{{aeh.artCount}}</div>
              <div>动态</div>
          </div>
           <div class="all3">
              <div>{{0}}</div>
              <div>短视频</div>
          </div>
      </div>
    </div>
    <div class="luu">
        <van-tabs v-model="activeName">
  <van-tab title="动态" name="a">内容 1</van-tab>
  <van-tab title="短视频" name="b">内容 2</van-tab>
  <van-tab title="关于Ta" name="c">内容 3</van-tab>
</van-tabs>
    </div>
  </div>
</template>
<script>
    let gyhd = ''
    import axios from 'axios'
export default {
    data() {
    return {
      activeName: 'a',
      ac:this.$route.query.ic,
      aeh:{},
      addf:true
    };
  },
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log(from)
    gyhd =from.fullPath;
    next();
  },
  methods: {
      lkk(){
          this.$router.push({ path : gyhd})
      },
      oop(){
        axios.post('/api/focusFriend',{},{
          params:{
            userId:this.ac,
            focusId:this.aeh.userId
          }
        }).then(res1=>{
          console.log(res1)
          if(res1.data.data === '关注成功'){
            this.addf = false
          }
        })
      },
      p1(){
        axios.post('/api/deleteFocus',{},{
          params:{
            userId:this.ac,
            focusId:this.aeh.userId
          }
        }).then(resd=>{
          console.log(resd)
          if(resd.data.data === '取消关注成功'){
            this.addf = true
          }
        })
      }
  },
  mounted() {
    axios.post('/api/getDiaoYou',{},{
      params:{
        id:this.ac,
      }
    }).then(res =>{
      console.log(res.data.data)
      this.aeh = res.data.data
      if(this.aeh.focused === false){
      this.addf = true
      }else{
        this.addf = false
      }
    })
  },
};
</script>
<style scoped>
.luu{
    width: 20rem;
}
.all{
    display: flex;
}
.all1{
    display: flex;
    width: 15rem;
    justify-content: space-evenly;
    position: relative;
    left: 11rem;
    }
.infor{
    font-size: 1.6rem;
    line-height: 2.5rem;
 margin-top: 1rem;
}
.all2{
    display: flex;
    justify-content: space-evenly;
    font-size: 1.4rem;
    margin-top: 1.5rem;
    margin-bottom: 1.3rem;
}
.all3{
    text-align: center;
}
.tou{
    width: 30rem;
    margin-left: 3.5rem;
    margin-top: 5rem;
}
</style>